<template>
    <div class="container">
        <Breadcrumb :items="['系统管理', '字典管理']" />
        <a-card class="general-card" style="padding-top:10px;">
            <a-row>
                <a-col :span="6">
                    <a-card class="general-card" title="字典树">
                        <div style="width: 100%; overflow: auto;height:450px">
                            <a-tree
                              :blockNode="true"
                              :show-line="true"
                              :fieldNames="{
                                key: 'dictKey',
                                title: 'dictValue',
                                children: 'children'
                              }"
                              @select="onCheck"
                              :data="treeData"
                            >
                              <!-- <template #extra="nodeData">
                                  <icon-plus 
                                      
                                      style="position: absolute; right: 8px; font-size: 12px; top: 10px; color: #3370ff;"
                                      @click="() => onIconClick(nodeData)"/>
                              </template> -->
                            </a-tree>
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="17">

                    <a-card class="general-card" title="字典列表">
                        <div style="width: 100%; overflow: auto;height:520px">
                             <a-table :data="renderData" :pagination="true" :bordered="false">
                               <template #columns>
                                <a-table-column title="名称" align="center" data-index="streetName">
                                </a-table-column>
                                <a-table-column title="PID" align="center" data-index="regionName">
                                </a-table-column>
                                <a-table-column title="值" align="center" data-index="streetName">
                                </a-table-column>
                                <a-table-column title="类型" align="center" data-index="streetName">
                                </a-table-column>
                                <a-table-column title="说明" align="center" data-index="streetName">
                                </a-table-column>
                                 <a-table-column title="操作" align="center" data-index="orderNo" :width="150">
                                  <template #cell="{ record }">
                                    <a-button type="outline" status="warning" shape="round" size="mini"
                                      style="margin-left:6px">
                                      <template #default>
                                          删除
                                      </template>
                                    </a-button>
                                  </template>
                                 </a-table-column>
                               </template>
                             </a-table>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>
<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import {ref} from 'vue';
import { postRequest } from '@/api/common';

// function onIconClick(nodeData: any) {
//     const children = nodeData.children || []
//     children.push({
//       title: 'new tree node',
//       key: nodeData.key + '-' + (children.length + 1)
//     })
//     nodeData.children = children

//     // treeData.value = [...treeData.value];
// }
// mdc/dictArea/getTree;
const treeData = ref<any[]>([]);
const renderData = ref<any[]>([]);

const fetchData = async () => {
    
};
const onCheck = (newCheckedKeys:any, event:any) =>{
   console.log('check: ', newCheckedKeys, event);
   console.log(event.node.dictValue)
   renderData.value =event.node.children;
}
fetchData();

</script>
<script lang="ts">
export default {
  name: 'title',
};
</script>
<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
    height: 90%;
}
.rate{
  font-size: 15px;
}
::v-deep(.arco-rate-character:not(:last-child)){
  margin-right: 1px;
}
</style>